<?php
use yii\helpers\Url;
use app\models\Supplier;
use app\modules\Product\models\Product;
use yii\widgets\LinkPager;
use yii\helpers\ArrayHelper;
use app\components\JSSDK;

$supplier = Supplier::find()->where(['status'=>1])->asArray()->all();
$supplier = yii\helpers\ArrayHelper::map($supplier,'id','company');

$this->title = "航线列表";

$day_num = [1=>'1-5天',2=>'6-10天',3=>'11-15天',4=>'15天以上'];


//$pro_line = yii::$app->params['line'];

$from_all_city = (new \yii\db\Query())
    ->select(['COUNT(c.supplier_id) as f_city','p.id','c.supplier_id'])
    ->from('product as p')
    ->leftJoin('cruise as c','c.id = p.cruise_id')
    ->where(['p.status'=>1])
    ->andFilterWhere(['>=','p.go_time',$today])
    ->addGroupBy('c.supplier_id')
    ->orderBy('f_city desc')
    ->all();


$all_line = (new \yii\db\Query())
    ->select(['COUNT(line) as f_line','id','line'])
    ->from('product')
    ->where(['status'=>1])
    ->andFilterWhere(['>=','go_time',$today])
    ->addGroupBy('line')
    ->orderBy('f_line desc')
    ->all();

$pro_line = ArrayHelper::map($all_line,'line',function ($element) {
    return yii::$app->params['line'][$element['line']];
});


// $pro_city = ArrayHelper::map($from_all_city,'from_city',function ($element) {
//     return yii::$app->params['city'][$element['from_city']];
// });

$pro_city = ArrayHelper::map($from_all_city,'supplier_id',function($element) {
    return $element['supplier_id'];
});

foreach($pro_city as $key=>$val){
    $pro_city[$key] = $supplier[$val];
}


//邮轮公司logo
$logo_path = [
        3=>'/img/logo3/3.png',
        4=>'/img/logo3/4.png',
        5=>'/img/logo3/5.png',
        6=>'/img/logo3/6.png',
        7=>'/img/logo3/7.png',
        8=>'/img/logo3/8.png',
        9=>'/img/logo3/9.png',
        10=>'/img/logo3/10.jpg',
]; 

$jssdk = new JSSDK("wxdf104a667847eb11", "1e1b098e7c4f442d94fe3499463238f2");
$signPackage = $jssdk->GetSignPackage();

?>
<script type="text/javascript" src="/js/iconfont.js"></script>
<?= yii\web\View::registerCssFile("/css/front/index.css",['depends' => 'app\assets\MuiAsset']) ?>

<style type="text/css">
    .mui-bar-nav{background-color: #f7f7f8}
    .mui-tab-item{margin-top: 5px;}
    .city{background-color: #f7f7f7}
    .text-center{text-align: center;}
    .mui-popover {height: 300px;}
    .city{color: #0A95CC;margin-top: 0px;}
    .city p{color: #0A95CC;font-size: 16px;}
    .city .iconfont{color: #0A95CC;font-size: 18px;}
    .mui-card{margin: 0;}
    .mui-bar-tab{background-color:#FFF;}
    .mui-tab-item .tab-label {font-size: 0.7rem;}
    .mui-tab-item{margin-top: 5px;}
    .mui-tab-item .iconfont{margin-top: 8px;}
    .mui-bar-tab .mui-tab-item.mui-active{color: rgb(41, 167, 226);}
    .mui-bar-tab .mui-tab-item.nav-active{color: rgb(41, 167, 226);}
    .mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before{color: rgb(41, 167, 226);}

    .pic-box{width: 100%;position: absolute;z-index: 2;left: 0;top: 50vw;background: url(/img/bg_opacity40.png);height: 10vw;}
    .pic-box-name{line-height: 10vw;font-size:1rem;color: #FFF;}
    .pic-top{position: absolute;left: 0;top:0;background:url(/img/bg_price.png);background-repeat:no-repeat;background-size: cover;/*padding: 4px;*/text-align: center;color: #FFFFFF;width:26vw;margin-left: 5%;height: 13vw;}

    .line-box{position:absolute;width:30%;height:60px;background:rgba(0,0,0,0.5);margin-left: 4%;margin-top: -20%;}
    .box-bl{border:1px solid; border-color:rgba(255,255,255,0.5);margin: 5px;height: 50px;}
    .box-bl p{color: #FFFFFF;font-size: 14px;text-align: center;height: 25px;line-height: 25px;margin: 0;font-weight: bold;}

    .icon {
       width: 1.4rem; height: 1.4rem;
       vertical-align: -0.3em;
       fill: currentColor;
       overflow: hidden;
    }
    .mui-card-new{background-color:transparent !important;box-shadow: none !important;}  
    .mui-card-new .mui-input-group{background-color:transparent}

    .mui-pagination>li>a, .mui-pagination>li>span{color: #a664a6;}
    .mui-pagination>li.mui-active>a, .mui-pagination>li.mui-active>a:active, .mui-pagination>li.mui-active>span, .mui-pagination>li.mui-active>span:active, .mui-pagination>li:active>a, .mui-pagination>li:active>a:active, .mui-pagination>li:active>span, .mui-pagination>li:active>span:active{border-color: #a664a6;background-color: #a664a6;}

    .line-list{padding:10px;margin:10px 0px;border-radius:0px;background-color: #FFFFFF;}

    .cruise-line{padding-bottom: 48px;}

    .filter_ul_list li{position: relative;padding: 10px 5px 10px 5px;
        min-height: 18px;
        line-height: 18px;
        border-bottom: 1px solid #d0d0d0;
        font-size: 14px;
    }

    .filter_list_box .filter_box:after {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    content: "\20";
    background-color: #d0d0d0;
    }

    .filter_it_list li {
      position: relative;
      z-index: 2;
      padding: 10px 24px 10px 5px;
      min-height: 18px;
      line-height: 18px;
      border-bottom: 1px solid #d0d0d0;
      font-size: 14px;
    }
</style>


<div class="mui-content">

   <div class="cruise-line">
        
            <?php foreach($lines as $v){?>
            <div class="line-list" data-href="<?=Url::toRoute(['lines','id'=>$v->id])?>">
                      <img  src="<?=\Yii::$app->params['qiniu_path'].$v->image->path.'?imageView2/1/w/360/h/220'?>" width="40%"  >
                      <div class="line-box">
                        <div class="box-bl">
                          <p><?=$v->go_time?></p>
                          <p><?=yii::$app->params['city'][$v->from_city]?>上船</p>
                        </div>  
                      </div>
                     
                      <div style="width:55%;float: right;">
                          <div class="mui-row">
                            <div class="mui-col-xs-12" style="font-size:0.8rem;color: #333;">
                            <?=$v->name?>
                            </div>
                          </div>  
                            <p style="font-size: 0.6em;margin: 5px 0;color: #666">
                                 <img src="<?=isset($logo_path[$v->cruise->supplier_id])?$logo_path[$v->cruise->supplier_id]:'/img/logo/400.png'?>" style="height:0.8rem;vertical-align: middle;line-height: 0.8rem" >
                                 <span style="font-size:0.8rem;height:0.8rem;vertical-align: middle;line-height: 0.8rem"><?=$supplier[$v->cruise->supplier_id]?></span>
                            </p>
                            <p class="color-b" style="margin:5px 0;">
                                <span style="font-size:1rem;color: #FA6114">
                                      ¥<?=floor($v->minPrice)?>
                                </span>
                                <span style="font-size: 0.6rem;color: #FA6114;">
                                       起/人
                                </span>
                            </p>
             
                      </div>
                   
              </div>
              <?php }?>
       
              <div class="mui-content-padded text-center">
                  
             <?= yii\widgets\LinkPager::widget(['pagination' => $provider->pagination,'lastPageLabel'=>false, 'firstPageLabel'=>false,'maxButtonCount'=>5,'activePageCssClass'=>'mui-active','disabledPageCssClass'=>'mui-disabled','nextPageLabel' => false,'prevPageLabel' => false,'options'=>['class'=>'mui-pagination']]); ?>
              </div>
   </div>

    
</div>

<ul class="bottom_filter dn" id="filter_list_bottom">
  <li data-type="FilterAllExceptSort" id="filter"><i class="icon_city"></i>筛选</li>
  <li data-type="Sorts" id="sort"><i class="icon_sort"></i>排序</li>
</ul>

<div class="filter_pop_wrap" style="position: fixed;display: none; z-index: 4960; bottom: 0px; left: 0px;">
                        
    <div class="filter_pop_hd">
      <span class="filter_btn_cancel" id="search_layer_hide">取消</span> 
      <span class="filter_btn_ok" id="search_submit">确认</span> 
      <span class="filter_btn_clear" id="search_key_clear">清空筛选</span>
    </div>

    <div class="filter_pop_bd">
      <div class="filter_list_box" style="width: 100%;height: 100%;margin: 0;padding: 0;">

        <div class="filter_box" style="background-color: #f5f5f5;width: 90px;margin: 0;padding: 0;float: left;height: 100%;">
            <ul  class="filter_ul_list" style="list-style: none;
    overflow: scroll;margin: 0px;padding: 0px;">
                <li>出发城市</li>
                <li>邮轮航线</li>
                <li>邮轮名称</li>
                <li>行程天数</li>
                <li>价格</li>
                <li>月份</li>
            </ul>
        </div>
        
        <div class="filter_box_right" style="margin:0;padding: 0;float: left;">
              <ul class="filter_it_list" style=" list-style: none;
      overflow: scroll;
      margin: 0px;
      width: 100%;
      position: absolute;padding: 0 5px;">
                <li>出发城市</li>
                <li>邮轮航线</li>
                <li>邮轮名称</li>
                <li>行程天数</li>
                <li>价格</li>
                <li>月份</li>
              </ul>
        </div>

      </div>  
    </div>


</div>

<div class="layer" style="z-index: 3002; top: initial; bottom: 0.1px; left: 0px; width: 100%; margin: 0px; padding: 0px; position: fixed;display:none;" id="ui-view-13"><div class="cui-pop-box" style="height: 100%; width: 100%;">
                    <style>
                        .cui-pop-box {
                            background: #fff;
                            width: 280px;
                            margin: auto;
                            position: relative;
                            overflow: hidden;
                            border-radius: 3px;
                            z-index: 9999;
                        }
                            .cui-pop-box .cui-hd {
                                height: 40px;
                                line-height: 40px;
                                font-size: 1.2em;
                                color: #fff;
                                background: #099fde;
                                padding: 0 10px;
                                position: relative;
                            }
                                .cui-pop-box .cui-hd .lab-close-area {
                                    position: absolute;
                                    width: 50px;
                                    height: 100%;
                                    right: 0;
                                    top: 0;
                                }
                                .cui-pop-box .cui-hd .cui-top-close {
                                    width: 40px;
                                    height: 40px;
                                    float: right;
                                    line-height: 40px;
                                    color: transparent;
                                    text-align: center;
                                    font-weight: 700;
                                    position: relative;
                                }
                                    .cui-pop-box .cui-hd .cui-top-close:before, .cui-pop-box .cui-hd .cui-top-close:after {
                                        width: 2px;
                                        height: 16px;
                                        position: absolute;
                                        left: 50%;
                                        top: 50%;
                                        margin: -8px 0 0 -1px;
                                        background: #fff;
                                        content: "";
                                    }
                                    .cui-pop-box .cui-hd .cui-top-close:before {
                                        -webkit-transform: rotate(45deg);
                                        -moz-transform: rotate(45deg);
                                        -ms-transform: rotate(45deg);
                                        transform: rotate(45deg);
                                    }
                                    .cui-pop-box .cui-hd .cui-top-close:after {
                                        -webkit-transform: rotate(-45deg);
                                        -moz-transform: rotate(-45deg);
                                        -ms-transform: rotate(-45deg);
                                        transform: rotate(-45deg);
                                    }
                        .cui-roller-btns {
                            display: -webkit-box;
                            display: -moz-box;
                            display: -ms-flexbox;
                            display: -webkit-flex;
                            display: flex;
                            width: 100%;
                            -webkit-box-flex: 1;
                            -moz-box-flex: 1;
                            -webkit-flex: 1;
                            -ms-flex: 1;
                            flex: 1;
                            background: #fff;
                            border-top: 1px solid #bcbcbc;
                            line-height: 18px;
                            text-align: center;
                            -webkit-box-sizing: border-box;
                            -moz-box-sizing: border-box;
                            box-sizing: border-box;
                        }
                        .cui-flexbd {
                            -webkit-box-flex: 1;
                            -moz-box-flex: 1;
                            -webkit-flex: 1;
                            -ms-flex: 1;
                            flex: 1;
                        }
                        .cui-roller-btns .cui-flexbd {
                            padding: 12px 0;
                            color: #099fde;
                        }
                        .cui-roller-btns a {
                            color: #099fde;
                        }
                        .cui-roller-btns .cui-flexbd:active {
                            opacity: .75;
                        }
                        .cui-roller-btns .cui-flexbd:nth-of-type(2) {
                            border-left: 1px solid rgba(0, 0, 0, 0.3);
                        }
                    </style><div class="cui-bd" style="overflow: hidden; position: relative; width: 100%; height: 300px; background-color: rgb(250, 250, 250);">
                        <div class="pop_filter pop_filter_sort" id="filter_sorts" style="position: absolute; background-color: white;"><div class="pop_filter_tit">当前结果按照以下方式排序</div>
                        <ul class="pop_filter_baselist" style="box-sizing: border-box;">
                            <li data-index="3" data-sort="Price" data-direction="false">价格从低到高</li>
                            <li data-index="4" data-sort="Price" data-direction="true">价格从高到低</li>
                            <li data-index="6" data-sort="Days" data-direction="false">天数从少到多</li>
                            <li data-index="5" data-sort="Days" data-direction="true">天数从多到少</li>
                            <li data-index="11" data-sort="Date" data-direction="false">日期从近到远</li>
                        </ul>
                        </div>
                        </div>
                        </div>
</div>

<div class="mask" id="mask" style="width: 100%; height: 1000px; position: absolute; left: 0px; top: 0px; z-index: 3001; background: rgba(0, 0, 0, 0.498039);display:none;"></div>


<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<?php app\components\JsBlock::begin() ?>
<script type="text/javascript">

// $("#mask").on("touchmove",function(event){
//     event.preventDefault;
// }, false);

$("#mask").click(function(){
    $(".mask").hide();
    $(".filter_pop_wrap").hide();
    $(".layer").hide();
});


$("#filter").click(function(){
    $(".filter_pop_wrap").show();
    $(".mask").show();
});

$("#search_layer_hide").click(function(){
    $(".filter_pop_wrap").hide();
    $(".mask").hide();
});

$("#sort").click(function(){
    $(".mask").show();
    $(".layer").show();
});





mui('body').on('tap',".img",function(){
    href = $(this).attr("data-href");
    document.location.href=href;
});
mui('body').on('tap',".pic-box",function(){
    href = $(this).attr("data-href");
    document.location.href=href;
});

mui('body').on('tap',".line-list",function(){
    href = $(this).attr("data-href");
    document.location.href=href;
});

var url = "<?= yii::$app->request->getUrl() ?>";    
var sign = (url.indexOf('?') == -1) ?  "?" : "&";


$(".day").change(function(){
      var day_val = 0;       
      day_val = $('input[name="day"]:checked').val();
      location.href = url + sign + "day=" + day_val+"&page=1";
});

$(".price").change(function(){
      var price_val = 0;       
      price_val = $('input[name="price"]:checked').val();
      location.href = url + sign + "price=" + price_val+"&page=1";
});


$(".city").change(function(){
      var city_val = 0;       
      city_val = $('input[name="city"]:checked').val();
      location.href = url + sign + "from_city=" + city_val+"&page=1";
});

$(".lines").change(function(){
     var lines_val = 0;
     var lines_val = $('input[name="lines"]:checked').val();
     location.href = url + sign + "lines=" + lines_val+"&page=1";
});

mui.init();
mui('body').on('shown', '.mui-popover', function(e) {});
mui('body').on('hidden', '.mui-popover', function(e) {});   

mui('.mui-scroll-wrapper').scroll({
    deceleration : 0.0005
});

mui('body').on('tap','a',function(){document.location.href=this.href;});



wx.config({
    debug: false,
    appId: '<?php echo $signPackage["appId"];?>',
    timestamp: '<?php echo $signPackage["timestamp"];?>',
    nonceStr: '<?php echo $signPackage["nonceStr"];?>',
    signature: '<?php echo $signPackage["signature"];?>',
    jsApiList: [
      // 所有要调用的 API 都要加到这个列表中
      'checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'onMenuShareQZone',
        'hideMenuItems',
        'showMenuItems',
        'hideAllNonBaseMenuItem',
        'showAllNonBaseMenuItem',

    ]
});


wx.ready(function(){
  var title = '邮轮旅游平台-航线列表';
  var desc = '邮轮旅游平台-航线列表';
  var link = '<?=sprintf("%s/front/default/index",yii::$app->request->getHostInfo())?>';
  var imgUrl = '<?=\Yii::$app->params['qiniu_path'].'/uploads/201706/1594cb321be769.jpg?imageView2/1/w/640/h/420';?>';
  
  wx.onMenuShareTimeline({
    title:desc,
    desc:desc,
    link:link,
    imgUrl:imgUrl,
    
  });
  wx.onMenuShareQQ({
    title:title,
    desc:desc,
    link:link,
    imgUrl:imgUrl,
    
  });
  wx.onMenuShareWeibo({
    title:title,
    desc:desc,
    link:link,
    imgUrl:imgUrl, 
  });
  wx.onMenuShareAppMessage({
    title:title,
    desc:desc,
    link:link,
    imgUrl:imgUrl,
  });
  wx.onMenuShareQZone({
    title:title,
    desc:desc,
    link:link,
    imgUrl:imgUrl,
    
  });
      
  
});


</script>
<?php app\components\JsBlock::end() ?>
